
    
   <div class="jumbotron">
        <h1>历史</h1>
        <p>滚滚长江东逝水,浪花淘尽英雄。
           是非成败转头空。青山依旧在,几度夕阳红。
           白发渔樵江渚上,惯看秋月春风。
           一壶浊酒喜相逢。
           古今多少事,都付笑谈中。 ——《三国演义》·罗贯中</p> 
    </div>

    <div class="sideMenu">
        <ul style="list-style-type: none; padding-inline-start: 0px;"> 
            <li class="nLi on">
                <h3><span class="label label-default">展开/折叠</span></h3>
                <ul class="sub" style="list-style-type: none; padding-inline-start: 0px;">
                    <li>
                      <div class="row">
                        <div class="col-sm-4">
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">大洲</h3>
                            </div>
                            <div class="panel-body">
                              <select class="form-control" id='select_dz'>
                                <option value='ALL'>全部</option>
                                <option value='AS'>亚洲(Asia)</option>
                                <option value='EU'>欧洲(Europe)</option>
                                <option value='NA'>北美洲(North America)</option>
                                <option value='SA'>南美洲(South America)</option>
                                <option value='AF'>非洲(Africa)</option>
                                <option value='OA'>大洋洲(Oceania)</option>
                                <option value='AN'>南极洲(Antarctica)</option>
                              </select>
                            </div>
                          </div>
                          <div class="panel panel-primary">
                            <div class="panel-heading">
                              <h3 class="panel-title">国家</h3>
                            </div>
                            <div class="panel-body">
                              <select class="form-control" id='select_gj'>
                              </select>
                            </div>
                          </div>
                        </div><!-- /.col-sm-4 -->
                        <div class="col-sm-4">
                          <div class="panel panel-success">
                            <div class="panel-heading">
                              <h3 class="panel-title">内容分类</h3>
                            </div>
                            <div class="panel-body">
                              <select class="form-control" id='select_fl'>
                                <option value='10'>人物</option>
                                <option value='20'>建筑</option>
                                <option value='30'>艺术</option>
                              </select>
                            </div>
                          </div>
                          <div class="panel panel-info">
                            <div class="panel-heading">
                              <h3 class="panel-title">自定义时段(公元前用负号-表示)</h3>
                            </div>
                            <div class="panel-body">
                              <input type="number" class="form-control" id="input_rqq" style="float:left ;width: 40%;" placeholder='-3000'>
                              <input type="number" class="form-control" id='input_rqz' style="float:right ;width: 40%;"  placeholder='3800'>
                            </div>
                          </div>
                        </div><!-- /.col-sm-4 -->
                        <div class="col-sm-4">
                          <div class="panel panel-warning">
                            <div class="panel-heading">
                              <h3 class="panel-title">重要时段</h3>
                            </div>
                            <div class="panel-body">
                              <div class="dropdown">
                                  <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-white" >
                                  <span id="select-title">时段</span> <span class="caret"></span></a>
                                  <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                                  
                                  {% for gjmc in mes.menu %}
                                      <li class="dropdown-submenu">
                                          <a href="javascript:;"   data-title="{{ gjmc.gjzwmc }}">{{ gjmc.gjzwmc }}</a>
                                          <ul class="dropdown-menu">
                                            {% for x in mes.res %}
                                              {% if x.gjzwmc == gjmc.gjzwmc %}
                                                <li><a   rel="external nofollow"
                                                 data-title="{{ x.time_id }}~{{ x.rqq }}~{{ x.rqz }}">{{ x.time }}({{x.rqq}}__{{x.rqz}})</a></li>
                                              {% endif %}
                                            {% endfor %} 
                                          </ul>
                                      </li>
                                    {% endfor %} 

                                  </ul>
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-danger">
                            <div class="panel-heading">
                              <h3 class="panel-title">找点啥？</h3>
                            </div>
                            <div class="panel-body">
                             <div class="row">
                              <div class="col-sm-4">
                                <select class="form-control" id='cxfs'>
                                  <option value='1'>相关</option>
                                  <option value='2'>精确</option>
                                </select>
                              </div>
                              <div class="col-sm-8">
                                <input type="text" class="form-control" maxlength="15" id="input_info" placeholder='查询信息'>
                              </div>
                              </div>
                            </div>
                          </div>
                          <p>
                          <button type="button" class="btn btn-lg btn-primary" id='btn_query'>穿越一下</button>
                    
                      </p>
                        </div><!-- /.col-sm-4 -->

                      </div>
                    </li>
                </ul>
            </li>
            
        </ul>
    </div>
        <hr>
         <div class ='row' id='div_loading' style="display: none;margin-left: 50%">
           <img src="static/img/loading.gif">
        </div>    
        <h2><span class="label label-info">搜索结果</span>
        </h2>
   
        <hr>
        <div class='row' style="text-align:center;">
                <label class="primary" id= 'count'></label>
        </div>
    <!--图片展示-->
      <div class="img_wrapper">
      <div class="img_cols">

        </div>
     </div>

    <!-- 弹出层 modal -->
     <div class="modal right fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                
                <h4 class="modal-title" id="myModalLabel"></h4>
              </div>
              <div class="modal-body" ">
                <div id="modal_img" align="center"></div>
                <div id="modal_list" style="font-size:larger;font-family: \96B6\4E66;"></div>
                <div id="modal_rwxx" style="font-size:larger;font-family: \96B6\4E66;"></div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
      </div>

 
    </div>
    <script src="static/js/bootstrap-maxlength.js"></script>

<script type="text/javascript">

     
      $(function(){

          $('#input_info').maxlength();

          //展示折叠
          $(".sideMenu .nLi h3").click(function(){
                if($(this).parent(".nLi").hasClass("on")){
                    $(this).next(".sub").slideUp(300,function(){
                        $(this).parent(".nLi").removeClass("on")
                    });
                }else{
                    $(this).next(".sub").slideDown(300,function(){
                        $(this).parent(".nLi").addClass("on")
                    });
                }
          });

          //二级菜单
          $('.dropdown ul ul a').click(function(){
               time = $(this).attr("data-title").split('~');
               title = $(this).text();
               id = $(this).attr("data-title");
               $("#select-title").text('');
               $("#select-title").text(title);
               //设置日期
               $('#input_rqq').val(time[1]);
               $('#input_rqz').val(time[2]);

          });

          //查询国家信息
          $('#select_dz').change(function(){
           
            $.ajax({
                  //请求方式
                  type : "POST",
                  //数据类型
                  dataType: 'json',
                  //请求地址
                  url : "/get_gj",
                  //数据，json字符串
                  data : {'dz':$('#select_dz').val()},
                  //请求成功
                  success : function(rs) {
                  
                    let html_selectGj = '<option value="ALL">全部国家</option>'
                    for(var i =0;i<rs.length;i++){
                      html_selectGj += '<option value="'+rs[i].gj3_dm+'">'+rs[i].gjzwmc+'</option>'
                    }
                    
                    $('#select_gj').empty()
                    $('#select_gj').append(html_selectGj)
                    
                  },
                  //请求失败，包含具体的错误信息
                  error : function(e){
                      alert(e)
                  }
              });
          });

          //ajax提交数据
          $('#btn_query').click(function(){
/*              if($('#input_rqq').val()=='' || $('#input_rqz').val()==''){
                alert('时间段不能为空，请录入！')
                return 
              }*/
              let list = {
                'qy_dz'  : $('#select_dz').val(),
                'qy_gj'  : $('#select_gj').val(),
                'qy_fl'  : $('#select_fl').val(),
                'qy_time': $('#select_time').val(),
                'qy_rqq' : $('#input_rqq').val()?$('#input_rqq').val():-3000,
                'qy_rqz' : $('#input_rqz').val()?$('#input_rqz').val():3000,
                'qy_info': $('#input_info').val(),
                'qy_cxfs': $('#cxfs').val()
              }

              $.ajax({
                  //请求方式
                  type : "POST",
                  //数据类型
                  dataType: 'json',
                  //请求地址
                  url : "/query",
                  //数据，json字符串
                  data : list,
                  beforeSend: function(request) {
                    $('#btn_query').attr("disabled", true)
                    $('#div_loading').show()
                  }, 
              　　complete : function(request){ //请求完成后最终执行参数
                    $('#btn_query').attr("disabled", false)
                    $('#div_loading').hide()
              　　},
                  //请求成功
                  success : function(rs) {
                    $('#count').text('共：'+rs.count+'条记录，水管小最多显示50条！')
                    let html_img=''
                    for(var i=0;i<rs.res.length;i++){
                      
                      html_img += 

                        '<div class="img_col" ontouchstart="this.classList.toggle("hover");">\
                          <div class="img_container">\
                            <div class="img_front" style="background-image: url(static/sm_img/'+rs.res[i].uuid+'.jpg)">\
                              <div class="img_inner" style="top: 80%;">\
                                <p>'+rs.res[i].need_name+'</p>\
                                <span>'+rs.res[i].rqq+'至'+rs.res[i].rqz+'</span>\
                              </div>\
                            </div>\
                            <div class="img_back" >\
                              <div class="img_inner" style="top: 50%;">\
                                <p>'+rs.res[i].intro.slice(0,100)+'......\
                                <button type="button" class="btn btn-sm btn-info btnInfo" \
                                id=\'info_'+rs.res[i].uuid+'\'>详细信息</button><br>\
                                <button style ="float:left" type="button" class="btn btn-xs btn-danger btnErr" \
                                id=\'err_'+rs.res[i].uuid+'\'>纠错</button>\
                                <button style ="float:right" type="button" class="btn btn-xs btnCol" id=\'col_'+rs.res[i].uuid+'\' >\
                                  <span class="glyphicon glyphicon-heart"></span> 收藏 </button>\
                                </p>\
                              </div>\
                            </div>\
                          </div>\
                        </div>'

                    }
                    $('.img_cols').empty()
                    $('.img_cols').append(html_img)
                    

                  },
                  //请求失败，包含具体的错误信息
                  error : function(e){
                      alert(e)
                  }
              });

          });
          //图片详细信息（动态绑定事件）
          $(document).on("click", '.btnInfo', function () {
               let info_uuid = $(this).attr('id').split('_')[1]
                $.ajax({
                  //请求方式
                  type : "POST",
                  //数据类型
                  dataType: 'json',
                  //请求地址
                  url : "/get_bklist",
                  //数据，json字符串
                  data : {'uuid':info_uuid},
                  beforeSend: function(request) {
                    let loading_html = '<div class ="row"  style="margin-left: 50%"><img src="static/img/loading.gif"></div> '  
                    $('#myModalLabel').text('详情信息')
                    $('#modal_list').html('')
                    $('#modal_img').html('')
                    $('#modal_rwxx').html(loading_html)
                    $('#myModal').modal('show')
                  }, 
                  //请求成功
                  success : function(rs) {
                    
                    let html_body =''
                    let html_list =''
                      if(rs.bklist != ''){
                
                          html_list = '<ul class="ul_url">'

                          for(i=0;i<rs.bklist.length;i++){
                            if (rs.bklist[i].url==''){
                              html_list+='<li><span>'+rs.bklist[i].text+'</span></li>'
                              continue
                            }
                            html_list += '<li><a href="javascript:;"  value ="'+rs.bklist[i].url+'" > '+rs.bklist[i].text+'</a></li>'
                          }
                          html_list = html_list+'</ul>'
                          //拼接list 和详细内容
                        }
                    html_body = rs.bkxx
                        
                    $('#modal_list').html(html_list)
                    $('#modal_img').html('<img src=\'static/images/'+rs.uuid+'.jpg\' class="img-responsive img-rounded" height="auto">')
                    $('#modal_rwxx').html(html_body)
                    

                  },
                  //请求失败，包含具体的错误信息
                  error : function(e){
                      alert('请求失败')
                  }
              });
          });


          //图片纠错（动态绑定事件）
          $(document).on("click", '.btnErr', function () {
               let uuid = $(this).attr('id').split('_')[1]
               let html_err =  '<form>\
                    <div class="row">\
                          <div>\
                                  <div class="control-group col-sm-12">\
                                    <label class="control-label">单据号</label>\
                                    <div class="controls">\
                                      <input type="text" id="err_uuid" value='+uuid+'  readonly="readonly" style="width:100%">\
                                    </div>\
                                  </div>\
                          </div>\
                          <div>\
                                  <div class="control-group col-sm-12">\
                                    <label class="control-label">错误描述</label>\
                                    <div class="controls">\
                                      <div class="textarea">\
                                            <textarea maxlength="100" class="form-control" id = "errinfo" style="height: 150px;resize: none;"> </textarea>\
                                      </div>\
                                      <button type="button" class="btn btn-primary" id="btn_err">提交</button>\
                                    </div>\
                                  </div>\
                          </div>\
                          </div>\
                    </div>\
                  </form>';
               $('#modal_list').html('')
               $('#modal_img').html('')
               $('#myModalLabel').text('错误详情')
               $('#modal_rwxx').html(html_err)
               $('#myModal').modal('show')
          });

         //收藏
          $(document).on("click", '.btnCol', function () {
               $(this).addClass('btn-danger')
               $(this).attr('disabled','disabled')
               let uuid = $(this).attr('id').split('_')[1]
                $.ajax({
                  //请求方式
                  type : "POST",
                  //数据类型
                  dataType: 'json',
                  //请求地址
                  url : "/post_col",
                  //数据，json字符串
                  data : {'uuid':uuid},
                  //请求成功
                  success : function(rs) {
                      alert(rs.mes)
                  },
                  //请求失败，包含具体的错误信息
                  error : function(e){
                      alert('请求失败！')
                  }
              });
          });



          //提交错误信息
          $(document).on("click", '#btn_err', function () {

            let list_err = {
                'uuid' : $('#err_uuid').val(),
                'errinfo' : $('#errinfo').val()
               }

                $.ajax({
                  //请求方式
                  type : "POST",
                  //数据类型
                  dataType: 'json',
                  //请求地址
                  url : "/post_err",
                  //数据，json字符串
                  data : list_err,
                  //请求成功
                  success : function(rs) {
                    alert(rs.mes)
                    $('#myModal').modal('hide')
                  },
                  //请求失败，包含具体的错误信息
                  error : function(e){
                      alert('请求失败')
                  }
              });
          })


//资料选择
    $(document).on("click", '.ul_url li a', function () {
          let  url_select= $(this).attr('value')
           $.ajax({
            //请求方式
                type : "POST",
                //数据类型
                dataType: 'json',
                //请求地址
                url : "/get_xxxxByUrl",
                //数据，json字符串
                data : {'url_select':url_select},
                //请求成功
                success : function(rs) {
                    $('#modal_rwxx').html(rs.zlxx);

                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    alert(e)
                }
            });

      })


      })

    </script>